"Roll-up" or "collapse" IFrame?

[Robert Oschler]

I have an IFrame on my web pages that displays useful tips. I have a button
next to it that hides and shows it by triggering a Javascript call. I know
how to make the iframe invisible by changing it's "visibility" property, and
I know how to change it's size using the style "height" property.

The problem is, with both of those techniques the IFRAME still occupies the
same amount of real estate as before, even if it's now invisible / shrunken.
That is, the elements vertically below it in the containing TABLE do not
move up to fill in the unoccupied screen space. (Note: I am *not*
specifying any row or cell heights at all.)

How can I get the rest of the page to move up when I hide / shrink the
IFrame with Javascript?

Thanks.

[Martin Honnen]

Robert Oschler wrote:

How can I get the rest of the page to move up when I hide / shrink the
IFrame with Javascript?

There is no difference to other elements, if you want to make an element
not consume any layout space and be hidden then set the CSS display
property to none e.g.
iframeElement.style.display = 'none'
to show it again set
iframeElement.style.display = ''
--

Martin Honnen
http://JavaScript.FAQTs.com/

[Robert Oschler]

"Martin Honnen" <ma*******@yahoo.de> wrote in message
news:42***********************@newsread4.arcor-online.net...

There is no difference to other elements, if you want to make an element
not consume any layout space and be hidden then set the CSS display
property to none e.g.
iframeElement.style.display = 'none'
to show it again set
iframeElement.style.display = ''
--

Martin Honnen
http://JavaScript.FAQTs.com/

Thanks Martin, that did the trick. Got any quick ideas on what I could put
in it's place as an attractive "placeholder"? Something about 5 pixels
high?

[alu]

"Robert Oschler" <no************@nospam.com> wrote

I have an IFrame on my web pages that displays useful tips. I have a button next to it that hides and shows it by triggering a Javascript call. I know how to make the iframe invisible by changing it's "visibility" property, and I know how to change it's size using the style "height" property.

The problem is, with both of those techniques the IFRAME still occupies the same amount of real estate as before, even if it's now invisible / shrunken. That is, the elements vertically below it in the containing TABLE do not
move up to fill in the unoccupied screen space. (Note: I am *not*
specifying any row or cell heights at all.)

How can I get the rest of the page to move up when I hide / shrink the
IFrame with Javascript?

Thanks.

_________________________________________

what you want is style="display:none;" not "visibility:hidden"

-alu